﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>项目成员</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        #divMemberList
        {
            overflow: hidden;
            min-width: 500px;
            margin-top: 10px;
            display: block;
            text-align: center;
        }
        .divLeaderInfo
        {
            width: 72px;
            height: 82px;
            margin-left: 10px;
            margin-right: 10px;
            border: 1px solid #008B00;
            float: left;
            border-radius: 4px;
            -webkit-border-radius: 4px;
        }
        .divMemberInfo
        {
            width: 72px;
            height: 82px;
            margin-left: 10px;
            margin-right: 10px;
            float: left;
            color: #333;
            border-radius: 4px;
            -webkit-border-radius: 4px;
        }
        
        .divMemberInfo:hover
        {
            background-color: #4a99d0;
            color: #fff;
            cursor: pointer;
        }
        .divMemberInfo:hover p
        {
            color: #fff;
        }
        
        .imgPhoto
        {
            width: 48px;
            height: 48px;
            padding: 5px;
        }
        .btn-close
        {
            float: right;
            margin: -98px 0 0 55px;
            z-index: 99;
            position: absolute;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script type="text/javascript">
        //************* URL常量

        var URL_UPDATE_DESCRIPTION = '/project/DoUpdateProjectDescription';
        var URL_UPDATE_PROJECT_MEMBERSTRING = '/project/DoUpdateProjectMemberString';
        //************* 全局变量

        var g_Var = {
            "userIdList":[],
            'removedUserList': [],
            'project' :null,
            'timeOutMark': null,

        };

    //************* 常量定义
    var DoUpdateDescription = $.AsycnMethod(URL_UPDATE_DESCRIPTION, 'post');
    var DoUpdateProjectMemberString = $.AsycnMethod(URL_UPDATE_PROJECT_MEMBERSTRING, 'post');


    //************* Accessor访问器
    var EzAccessor = {};

function CreateAccessor() {
    //实现服务器交互方法
    EzAccessor = {
        "getProjectInfo": function () { 
            return <%= WebJsonExtension.ToJson(Model.ProjectInfo) %>;
        }

    };
}


function bindProjectInfo(project)
{
    showProjectInfo(project);
    //项目负责人
    bindProjectLeader(project.Leader);
    //成员列表
    bindMemberlist(project.MemberList);
}

function resetUserSelector() {
    $('#pnlEditMembers').userSelector('reset');
    $('#pnlEditMembers').userSelector('removeUsers', g_Var.userIdList.join(','));    
}

function bindProjectLeader(leader) {
    bindMemberLeader(leader);
}
      
function bindMemberlist(memberList){
    for(var key in memberList){
        if(memberList[key].Role == "member"){
            bindMemberCommon(memberList[key].Member);   
        }
    }
}


function bindMemberLeader(leader){
    g_Var.userIdList.push(leader.Member.Id);   
    
    var divDom = $('<div class="divLeaderInfo"></div>');
    var photoStr = '<img class="imgPhoto" src="/core/headicon/{userId}" alt="headicon" />';
    photoStr = photoStr.replace("{userId}", leader.Member.Id);

    var nameStr = '<p class="txtMember">{userName}</p>';
    nameStr = nameStr.replace("{userName}", leader.Member.Name);

    $(divDom).append(photoStr)
             .append(nameStr);
    
    $('#divMemberLeaderList').append(divDom);    

}

function bindMemberCommon(member){
    g_Var.userIdList.push(member.Id);
    
    var divDom = $('<div class="divMemberInfo"></div>');
    divDom.attr('id', "member_" + member.Id);
    var photoStr = '<img class="imgPhoto" src="/core/headicon/{userId}" alt="headicon" />';
    photoStr = photoStr.replace("{userId}", member.Id);
    var nameStr = '<p class="txtMember">{userName}</p>';
    nameStr = nameStr.replace("{userName}", member.Name);

    $(divDom).append(photoStr)
             .append(nameStr);

    $(divDom).data("userId", member.Id);           
    $(divDom).data("member", member);           
    $('#divMemberCommonList').append(divDom); 
    
    $(divDom).hover(function () {
        var _self = $(this);
        var removeDomStr =  '<a onclick="removeMemberFromTeam(\'{userId}\')" class="btn-close"><img src="../../Content/images/close_pop.png" style="border:0px; widht:24px; height:24px;" class="btn_close"alt="Close" /></a>';
        removeDomStr = removeDomStr.replace("{userId}", _self.data("userId"))
        _self.append(removeDomStr);
    },function () {
        $('.btn-close').remove();
    });
}

function removeMemberFromTeam(userId){
    //todo：删除成员
    $(g_Var.userIdList).each ( function (index, item) {
        if (item == userId)
        {
            var member = $('#member_'+userId).data("member");           
            g_Var.userIdList.splice(index,1);
            g_Var.removedUserList.push(member);   

            $('#member_' + userId).remove();
            
            onMembersChanged();
         }
    });
};


function submitProjectMembers()
{
    var memberString = g_Var.userIdList.join(',');

    DoUpdateProjectMemberString(
        function(e){
            $.displaySnapStatusInfo(e);
            //撤销操作    
        },
        {'projectId': g_Var.project.Id,'memberString': memberString}
    );
}


function onMembersChanged() {
    $('#divMemberList').trigger('membersChanged');      
}

function showProjectInfo(project){
    if (PorjectInfo) {
        PorjectInfo.Show(project);
    }
}

//初始化页面
function initPage() {
    EzTipsManager.addTipBox('#tip_Remind', 'tipRemind');
    EzTipsManager.showTipBox('tipRemind');

    $('#pnlEditMembers').userSelector({
        preOpenSelectPanel: resetUserSelector,
        selectorPanelClosed: function (e, arg) {
            var str = "";
            // 把选择了的人显示出来
            $(arg.Users).each(function (index, item) {
                bindMemberCommon(item);
            });

            if(arg.Users.length>0)  {
                onMembersChanged();
            }
        },
        offsetX: -250,
        offsetY: 20
    });

    // 把当前MemberList里面的人选中
    // 把负责人Disable

    CreateAccessor();
    g_Var.project = EzAccessor.getProjectInfo();

    bindProjectInfo(g_Var.project);
}



//初始化事件
function initPageEvent() {

    $('.divLeaderInfo').qtip({
        content: '项目负责人',
        position: {
            my: 'top center',  
            at: 'bottom center' 
        }
    });

    $('.divMemberInfo').qtip({
        content: '项目成员',
        position: {
            my: 'top center',  
            at: 'bottom center' 
        }
    });

    $('#divMemberList').bind('membersChanged', function (){
        if (g_Var.timeOutMark) {
            clearTimeout(g_Var.timeOutMark);
        }
        g_Var.timeOutMark = setTimeout("submitProjectMembers()",5000);
    });

    $('#linkWorkitemList').click(function (){
        window.location.href = '/project/ProjectWorkitems?id=' + g_Var.project.Id;
    });
    
}

$(function () {
    initPage();
    initPageEvent();


});

    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
    <div id="status-bar">
        <% Html.RenderPartial("_navigateTo"); %><a href="/project/projectList" class="head">返回项目列表</a></div>
    <div id="tabs">
        <ul>
            <li><a class="current">成员</a></li>
            <li><a id="linkWorkitemList">任务</a></li>
            <li><a>文件</a></li>
        </ul>
    </div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head">
        <% Html.RenderPartial("_projectInfo"); %>
    </div>
    <div id="page-body">
        <p class="entry-explanation">
            项目成员</p>
        <div style="float: right;">
            <span id="pnlEditMembers">添加成员</span>
        </div>
        <div id="divMemberList">
            <div id="divMemberLeaderList">
            </div>
            <div id="divMemberCommonList" style="margin-left: 108px;">
            </div>
        </div>
    </div>
    <div class="page-submit">
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_Remind" style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
        </p>
    </div>
</asp:Content>
